<template>
    <div>
        <!-- <el-container> -->
        <!-- <el-header> -->
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <el-upload
                    class="drop-area"
                    drag
                    :before-upload="handleFileChange"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将视频文件拖拽到这里，或点击选择
                    </div>
                </el-upload>
            </el-col>
        </el-row>
        <!-- </el-header> -->
        <!-- <el-main> -->
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <video
                    v-if="videoFile"
                    controls
                    :src="videoFile"
                    ref="videoPlayer"
                    style="width: 100%"
                ></video>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <el-form :model="form" label-width="80px">
                    <el-form-item label="宽度">
                        <el-input
                            v-model="form.gifWidth"
                            placeholder="请输入宽度"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="高度">
                        <el-input
                            v-model="form.gifHeight"
                            placeholder="请输入高度"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="帧率">
                        <el-input
                            v-model="form.gifFrameRate"
                            placeholder="请输入帧率"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <el-button @click="convertToGif" :disabled="!videoFile"
                    >转换为 GIF</el-button
                >
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <div v-if="gifArray.length > 0" class="gif-list">
                    <div v-for="(gif, index) in gifArray" :key="index" class="image-container">
                        <el-image
                            :src="gif"
                            alt="Generated GIF"
                            style="max-width: 100%; height: auto"
                        ></el-image>
                        <el-button
                            type="text"
                            @click="downloadGif(gif)"
                            class="download-button"
                        >
                            下载
                        </el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- </el-main> -->
        <!-- </el-container> -->
    </div>
</template>

<script>
import { ref, reactive } from 'vue'
import GIF from 'gif.js'

export default {
    setup() {
        const videoFile = ref(null)
        const gifArray = ref([])
        const videoPlayer = ref(null)
        const form = reactive({
            gifWidth: 240,
            gifHeight: 240,
            gifFrameRate: 23.9
        })

        const handleFileChange = (file) => {
            videoFile.value = URL.createObjectURL(file)
            return false
        }

        const handlePreview = (file) => {
            // 预览视频或其他操作
            console.log('Preview:', file)
        }

        const handleRemove = (file) => {
            // 移除视频或其他操作
            console.log('Remove:', file)
        }

        const processVideoFrames = async () => {
            const gif = new GIF({
                workers: 1,
                quality: 0.1,
                workerScript: 'public/gif.worker.js',
                debug: true
            })

            const video = videoPlayer.value
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            const frameInterval = 1000 / form.gifFrameRate

            for (
                let time = 0;
                time < video.duration;
                time += frameInterval / 1000
            ) {
                video.currentTime = time
                await new Promise((resolve) => {
                    video.addEventListener('seeked', resolve, { once: true })
                })

                canvas.width = form.gifWidth
                canvas.height = form.gifHeight
                ctx.drawImage(video, 0, 0, form.gifWidth, form.gifHeight)
                gif.addFrame(canvas, { copy: true, delay: frameInterval })
            }

            gif.on('finished', (blob) => {
                const url = URL.createObjectURL(blob)
                gifArray.value.push(url)
            })

            gif.render()
        }

        const convertToGif = () => {
            processVideoFrames()
        }

        const downloadGif = (url) => {
            const link = document.createElement('a');
            link.href = url;
            link.download = 'generated.gif';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        return {
            videoFile,
            gifArray,
            videoPlayer,
            form,
            handleFileChange,
            handlePreview,
            handleRemove,
            convertToGif,
            downloadGif
        }
    }
}
</script>

<style scoped>
/* 根据需要添加样式 */
.gif-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
</style>
